<template>
  <div class="order">
    <div class="headerFix" ref="headerFix">
      <div class="seachHeader acea-row row-middle">
        <div class="location acea-row row-middle" @click="showLocation = !showLocation">
          <van-icon name="location-o" size="16" />
          <div class="city">{{form.province!=''?form.province:'选择省份'}}</div>
        </div>
        <van-search
          v-model="keyword"
          shape="round"
          show-action
          placeholder="请输入球场关键词"
          class="search"
          style="flex:1"
        >
          <template slot="action">
            <div @click="form.keyword = keyword">搜索</div>
          </template>
        </van-search>
      </div>
      
      <div class="condition acea-row row-middle">
        <div class="tag acea-row row-middle" >
          <van-tag class="item" v-for="(item,index) in tagList" :key="index" type="primary" :color="tagIndex!=item.id?'#ededed':'#1989fa'" @click="setTagIndex(item.id,item.title)" size="medium">{{item.title}}</van-tag>
        </div>
        <van-dropdown-menu>
          <!-- <van-dropdown-item :title="form.province!=''?form.province:'选择省份'" :options="option1" @open="showLocation=true" @close="showLocation=false" /> -->
          <van-dropdown-item v-model="sort" :options="option2" />
          <!-- <van-dropdown-item v-model="form.distance" :options="option3" /> -->
        </van-dropdown-menu>
      </div>
      
    </div>
    <div class="list acea-row row-column" >
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :style="'min-height:calc(100vh - '+contentHeightLess+'px);'">
        <van-list
          v-show="!refreshing"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了" 
          :offset="100"
          :immediate-check="false"
          @load="getCourseList"
          :style="'min-height:calc(100vh - '+contentHeightLess+'px);'"
        >
          <router-link :to="routerUrl+'/ball/'+item.id" class="item acea-row" v-for="(item,index) in courseList" :key="index">
            <div class="pic">
              <img v-if="item.logo!=''" :src="item.logo" alt="">
              <img v-else :src="logo" alt="">
            </div>
            <div class="content acea-row row-column">
              <span class="title">{{item.title}}</span>
              <div class="tags" v-if="item.tag.length != 0">
                <template v-for="(itemTag,indexTag) in item.tag">
                  <van-tag v-if="indexTag<5" :key="indexTag" class="tag-item" plain type="primary" size="medium" round>{{itemTag}}</van-tag>
                </template>
                <!-- <van-tag class="tag-item" plain type="primary" size="medium" round>18洞72杆</van-tag> -->
              </div>
              <div class="info">{{item.address?item.address:'暂无地址'}}</div>
              <div class="price acea-row row-middle">
                <p>会员价￥{{item.alliance_normal?item.alliance_normal:'暂无'}}</p>
                <p style="margin-left:20px">嘉宾价￥{{item.guest_normal?item.guest_normal:'暂无'}}</p>
              </div>
            </div>
            <div class="distance" v-if="item.juli">距您 {{item.juli.toFixed(2)}}KM</div>
          </router-link>
        </van-list>
      </van-pull-refresh>
    </div>
    <!-- <van-empty class="list" description="暂无球场" v-else /> -->
    <van-popup :overlay="true" v-model="showLocation" position="bottom" :style="{ height: '40%' }" >
      <van-area title="选择省份" cancel-button-text="不选地址" @confirm="getProvince" @cancel="cancelLocation" :area-list="areaList" :columns-num="1" />
    </van-popup>
  </div>
</template>

<script>
import searchHeader from 'components/search-header'
import logo from 'static/images/logo-order.png'
import config from 'api/config.js'
import location from 'utils/location.js'
import area from './area'
import api from 'api'
import { Toast } from 'vant'

export default {
  components:{
    searchHeader
  },
  data() {
    return {
      routerUrl:config.routerUrl,
      showLocation:false,
      areaList:area,
      sort:"",
      form:{
        province:"",
        distance:"",
        price:"",
        keyword:"",
        lat:"",
        lng:"",
        tag:"",
      },
      page:1,
      pagesize:10,
      courseList:[],
      tagList:[],
      keyword:'',
      refreshing:false,
      loading:true,
      finished:false,
      contentHeightLess:0,

      logo,
      tagIndex:0,
      value1: 0,
      value2: 0,
      value3: 0,
      value4: 0,
      option1: [],
      option2: [
        { text: '默认排序', value: ""},
        { text: '价格最低', value: "price_ASC" },
        { text: '价格最高', value: "price_DESC" },
        { text: '距离最近', value: "distance_ASC" },
        { text: '距离最远', value: "distance_DESC" },
      ],
      // option2: [
      //   { text: '智能价格', value: ""},
      //   { text: '价格最低', value: "ASC" },
      //   { text: '价格最高', value: "DESC" },
      // ],
      option3: [
        { text: '智能距离', value: ""},
        { text: '距离最近', value: "ASC" },
        { text: '距离最远', value: "DESC" },
      ],
    }
  },
  created() {
    this.getTagList()
  },
  mounted(){
    // console.log(this.$refs.headerFix.offsetHeight)
    this.contentHeightLess = parseFloat(this.$refs.headerFix.offsetHeight) + parseInt(60)
  },
  activated() {
    if(this.form.lat==0&&this.form.lng==0){
      this.getLocation()
    }
  },
  methods: {
    getCourseList(){
      // let toast = Toast.loading("加载中...")
      if(this.refreshing){
        this.courseList = []
      }
      this.loading = true
      let form = JSON.parse(JSON.stringify(this.form))
      form.keyword = this.keyword
      form.page = this.page
      form.pagesize = this.pagesize
      api.get("/course/courseList",form).then(e=>{
        // for(let i of e.data.courselist){
        //   let pt1 = {
        //     lng:this.form.lng,
        //     lat:this.form.lat,
        //   }
        //   let pt2 = {
        //     lng:i.lng,
        //     lat:i.lat,
        //   }
        //   i.distance = location.getDistance(pt1,pt2)
        // }
        this.courseList = this.courseList.concat(e.data.courselist)
        this.loading = false
        this.refreshing = false
        if(this.courseList.length < e.data.total_items){
          this.page++
        }else{
          this.finished = true
        }
        // toast.close()
      })
    },
    getLocation(){
      const that = this
      location.getLocation().then(e=>{
        that.form.province = e.province
        that.form.lat = e.point.lat
        that.form.lng = e.point.lng
      })
    },
    getTagList(){
      api.get("/course/tagList").then(e=>{
        this.tagList = e.data.tags
      })
    },
    getProvince(val){
      this.form.province = val[0].name
      this.showLocation = false
    },
    cancelLocation(){ //取消地址选择
      this.form.province = ""
      // this.form.lat = ""
      // this.form.lng = ""
      this.showLocation = false
    },
    onRefresh(){
      this.page = 1
      this.finished = false;
      this.getCourseList()
    },
    setTagIndex(idx,title){
      if(this.tagIndex == 0 || this.tagIndex != idx){
        this.tagIndex = idx
        this.form.tag = title
      }else{
        this.tagIndex = 0
        this.form.tag = ""
      }
    }
  },
  watch:{
    nForm(){
      // console.log("nformChange",this.form)
      this.page = 1
      this.courseList = []
      this.finished = false
      this.getCourseList()
    },
    nSort(){
      switch(this.nSort){
        case "price_ASC":
          this.form.price = "ASC",
          this.form.distance = ""
        break;
        case "price_DESC":
          this.form.price = "DESC",
          this.form.distance = ""
        break;
        case "distance_ASC":
          this.form.price = "",
          this.form.distance = "ASC"
        break;
        case "distance_DESC":
          this.form.price = "",
          this.form.distance = "DESC"
        break;
        default:
          this.form.price = "",
          this.form.distance = ""
        break;
      }
    }
  },
  computed:{
    nForm(){
      return JSON.parse(JSON.stringify(this.form))
    },
    nSort(){
      return JSON.parse(JSON.stringify(this.sort))
    },
  }
}
</script>

<style scoped>
  .order .condition .van-dropdown-menu{
    flex: 1;
  }
  .order .condition{
    /* height: 50px; */
    border-bottom: 1px solid #dddddd;
  }
  .order .condition >>> .van-dropdown-menu__bar{
    box-shadow: none;
  }
  .order .condition >>> .van-dropdown-menu__title{
    padding-left: 0;
    margin-left: -5px;
  }
  .order .condition >>> .van-dropdown-menu__bar{
    height: 25px;
  }
  .order .headerFix{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background-color: #ffffff;
  }
  .order .headerFix .seachHeader{
    box-sizing: border-box;
    padding: 0px 25px;
  }
  .order .headerFix .location{
    /* width: 180px; */
    flex-wrap: nowrap;
  }
  .order .headerFix .location .city{
    font-size: 26px;
    margin-left: 10px;
  }
  .order .tag{
    width: 75%;
    height: 80px;
    box-sizing: border-box;
    padding: 10px 10px;
    /* border-bottom: 1px solid #dddddd; */
    overflow: hidden;
  }
  .order .tag .item{
    margin: 10px 10px;
  }
  .order .list{
    /* margin-top: 238px; */
    margin-top: 190px;
    /* padding-bottom: 120px; */
  }
  .order .list .item{
    width: 100%;
    padding: 25px 0 25px 40px;
    box-sizing: border-box;
    border-bottom: 1px solid #dddddd;
  }
  .order .list .item .pic{
    width: 60px;
    height: 60px;
  }
  .order .list .item .content{
    flex: 1;
    margin-left: 10px;
  }
  .order .list .item .content .title{
    font-size: 26px;
    color: #161e29;
    line-height: 32px;
  }
  .order .list .item .content .tags{
    font-size: 14px;
    margin-top: 10px;
  }
  .order .list .item .content .tags .tag-item{
    margin: 5px 20px 0px 0;
  }
  .order .list .item .content .info{
    color: #888888;
    font-size: 26px;
    margin-top: 20px;
  }
  .order .list .item .content .price{
    color: #ff8400;
    font-size: 26px;
    margin-top: 20px;
  }
  .order .list .item .distance{
    /* flex: 1; */
    font-size: 24px;
    margin-right: 20px;
    margin-top: 10px;
  }
</style>